<template>
	<view class="logoinde">
		<indexNav></indexNav>
		<view class="shading"></view>
		<view class="biaoti">
			<view style="display: flex; align-items: center">
				<image class="w-90 h-90" src="@/static/imgs/qian.png" mode=""></image>
			</view>
			{{ $t("login.t14") }}
		</view>
		<!-- 顶部 Tabs -->
		<view class="register_block" v-if="initFinished">
			<u-tabs
			  :list="tabListFiltered"
			  :current="currentIndex"
			  @change="onTabChange"
			  lineWidth="0"
			  :scrollable="true"
			  :activeStyle="{
			    fontWeight: 'bold',
				borderBottom: '2px solid #007AFF'
			  }"
			></u-tabs>
		</view>
		<view v-if="active == 1">
			<view class="register_block" >
				<view class="register_block_list" style="margin-top: 15rpx">
					<input v-model="emal" type="text" :placeholder='$t("login.t7")' />
				</view>
				<view class="register_code">
					<view class="register_code_list">
						<input v-model="emalCode" style="width: 140px" type="text" :placeholder="$t('login.t15')" />
					</view>
					<view class="register_code_lists" @click="sendCode">{{ buttonText }}</view>
				</view>
				<view class="register_block_list">
					<input v-model="password" type="password" :placeholder="$t('login.t9')" />
				</view>
			
				<view class="register_block_list">
					<input v-model="newPassword" type="password" :placeholder="$t('login.t16')" />
				</view>
				<view class="register_block_list" v-show="inviteCode">
					<input v-model="invite" type="text" :placeholder="$t('login.t20')" />
				</view>
			</view>
			
			<view class="" style="padding: 0px 40px">
				<view class="register_submit" @click="submit">{{$t("category.c25")}}</view>
			</view>
		</view>
		<view v-if="active == 3">
			<view class="register_block" >
				<view class="register_block_list" style="margin-top: 15rpx">
					<input v-model="loginName" type="text" :placeholder="$t('login.t24')" />
				</view>
				<view class="register_block_list">
					<input v-model="password" type="password" :placeholder="$t('login.t9')" />
				</view>
			
				<view class="register_block_list">
					<input v-model="newPassword" type="password" :placeholder="$t('login.t16')" />
				</view>
				<view class="register_block_list" v-show="inviteCode">
					<input v-model="invite" type="text" :placeholder="$t('login.t20')" />
				</view>
				<view class="register_block_list" v-show="h5Code">
					<input v-model="emalCode" type="text" :placeholder="$t('login.t8')" />
					<view class="">
						<img class="w-240 h-80" :src="captchaUrl" @click="getCode" mode="aspectFit" />
					</view>
				</view>
			</view>
			
			<view class="" style="padding: 0px 40px">
				<view class="register_submit" @click="submit">{{$t("category.c25")}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAllSetting, easyGenerateCode, sendEmailCode } from '@/api/index.js';
import { register } from '@/api/login.js';
import indexNav from './components/indexNav.vue';
export default {
	components: {
		indexNav
	},
	data() {
		return {
			emal: '',
			loginName: '',
			emalCode: '',
			emalCodeImg: '',
			password: '',
			h5Code: false,
			allSetting: {},
			newPassword: '',
			emailIsOpen: '',
			ordinaryIsOpen: '',
			loginCaptcha: '',
			captchaUrl: '',
			invite: '',
			inviteCode: false,
			isCounting: false, // 是否正在倒计时
			count: 60 ,// 倒计时时长（秒）
			active: null, // 对应 tab 的 item.id
			tabList: [
				{ id: 3, name: this.$t("login.t25"), show: true },
				{ id: 1, name: this.$t("login.t26"), show: true },
			],
			initFinished: false
		};
	},
	computed: {
		// 按钮显示的文本
		buttonText() {
			return this.isCounting ? `${this.count}${this.$t('login.t18')}` : this.$t("login.t19");
		},
		tabListFiltered() {
		  return this.tabList.filter(item => item.show)
		},
		currentIndex() {
		  return this.tabListFiltered.findIndex(item => item.id === this.active)
		}
	},
	created() {
		this.init();
		this.getCode();
	},
	onLoad(options) {
		this.invite = options.code;
	},
	methods: {
		// 获取验证码
		async getCode() {
			let res = await easyGenerateCode({ codeType: 'REGISTER' });
			this.captchaUrl = res.msg;
		},
		onTabChange({ index }) {
		  this.active = this.tabListFiltered[index].id
		},
		async init() {
			//MARKET_URL h5Code = true 就多加一个验证码输入框
			//LOGIN_REGIS_SETTING 这个 emailIsOpen true就是邮箱注册
			//LOGIN_REGIS_SETTING inviteCode true
			let res = await getAllSetting();
			this.allSetting = res.data;
			const jsonh5Code = JSON.parse(res.data.MARKET_URL);
			const jsonemail = JSON.parse(res.data.LOGIN_REGIS_SETTING);
			this.h5Code = jsonh5Code.h5Code;
			this.emailIsOpen = jsonemail.emailIsOpen;
			this.ordinaryIsOpen = jsonemail.ordinaryIsOpen;
			this.inviteCode = jsonemail.inviteCode;
			
			// 根据接口结果更新 tabList 的 show 字段
			this.tabList = this.tabList.map(tab => {
			  if (tab.id === 1) {
				tab.show = this.ordinaryIsOpen;
			  } else if (tab.id === 2) {
				tab.show = this.emailIsOpen;
			  }
			  return tab;
			});
			
			// ✅ 设置 active 为第一个可见 tab 的 id
			const firstVisible = this.tabList.find(item => item.show);
			if (firstVisible) {
			  this.active = firstVisible.id;
			} else {
			  this.active = null; // 或设为 -1，如果没有可见项
			}
			
			 // ✅ 初始化完成，开始渲染 tabs
			  this.initFinished = true;
		},
		submit() {
			if(this.active == 1){
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (!emailRegex.test(this.emal)) {
					return this.$modal.toast(this.$t("login.t12"));
				}
				
			}else{
				if (!this.loginName) {
					return this.$modal.toast(this.$t('login.t24'));
				}
			}
			if (this.emalCode == '' && this.h5Code) {
				return this.$modal.toast(this.$t("login.t8"));
			}
			if (this.password == '') {
				return this.$modal.toast(this.$t("login.t9"));
			}
			if (this.inviteCode && this.invite == '') {
				return this.$modal.toast(this.$t("login.t20"));
			}
			if (this.newPassword == '') {
				return this.$modal.toast(this.$t("login.t9"));
			}
			if (this.newPassword !== this.password) {
				return this.$modal.toast(this.$t("login.t21"));
			}
			// {"email":"huixiongwl@gmail.com","phone":"","signType":1,"
			// loginPassword":"123456","newPassword":"123456","activeCode":"123","code":"123"}
			let obj = {
				phone: '',
				loginName: this.loginName,
				signType: this.active,
				email: this.emal,
				code: this.emalCode,
				loginPassword: this.password,
				newPassword: this.newPassword,
				activeCode: this.invite
			};
			register(obj).then((res) => {
				if (res.code == 200) {
					this.$modal.toast(this.$t("login.t22"));
					this.$Router.push('/pages/login/login');
					return;
				}
			});
		},
		// 发送验证码逻辑
		async sendCode() {
			const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
			if (this.isCounting) return;
			if (!emailRegex.test(this.emal)) {
				return this.$modal.toast(this.$t("login.t12"));
			}
			let res = await sendEmailCode({ codeType: 'REGISTER', email: this.emal });
			if (res.code == 200) {
				this.$modal.toast(this.$t("login.t23"));
			}
			// 开始倒计时
			this.startCountdown();
		},

		// 启动倒计时
		startCountdown() {
			this.isCounting = true;
			this.count = 60; // 重置倒计时时长

			const timer = setInterval(() => {
				if (this.count > 0) {
					this.count--;
				} else {
					clearInterval(timer); // 倒计时结束清除计时器
					this.isCounting = false; // 恢复按钮状态
				}
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
.logoinde {
	width: 100%;
	height: 100vh;
	background: rgb(255, 255, 255);
	.shading {
		
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		padding-top: 100px;
	}
	.biaoti {
		font-size: 25px;
		font-family: Microsoft YaHei;
		font-weight: 700;
		color: #333;
		padding: 0px 40px;
	}
}
.register_block {
	padding: 0 40px;
	.register_block_list {
		width: 100%;
		height: 50px;
		padding: 0 0;
		display: flex;
		align-items: center;
		font-size: 14px;
		border-bottom: 1px solid #eee;
		input {
			line-height: 50px;
			height: 50px;
			width: 100%;
			font-size: 15px;
		}
	}
	.register_code {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		.register_code_list {
			width: 100%;
			height: 50px;
			border-radius: 5px;
			display: flex;
			align-items: center;
			font-size: 14px;
			flex: 1 1 0%;
		}
		.register_code_lists {
			background: #ffeee7;
			color: #ff4438;
			border-radius: 20px;
			height: 32px;
			margin-left: 0;
			padding: 0 15px;
			line-height: 32px;
			font-weight: 700;
			font-size: 13px;
		}
	}
}
.tip {
	padding: 0px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: rgb(102, 102, 102);
	margin-top: 10px;
}
.register_submit {
	width: 100%;
	margin: 0 auto;
	height: 45px;
	background: -webkit-gradient(linear, left top, right top, from(#ff6241), color-stop(#ff6241), to(#ff3738));
	background: linear-gradient(90deg, #ff6241, #ff6241, #ff3738);
	border-radius: 30px;
	margin-top: 40px;
	text-align: center;
	line-height: 40px;
	color: #fff;
	border: 0 solid;
	font-size: 15px;
	font-weight: 700;
}
</style>
